<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul {
        list-style: none;
    }
    ul li {
        line-height: 30px;
    }
    ul li.current {
        background-color: #aaa !important;
    }
</style>
<script type="text/javascript">
    window.onload = function () {
        var lis = document.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            if (i % 2 == 0) {
                lis[i].style.backgroundColor = "#eee";
            } else {
                lis[i].style.backgroundColor = "#ddd";
            }
            lis[i].onmouseover = function () {
                this.className = "current";
            }
            lis[i].onmouseout = function () {
                this.className = "";
            }
        }
    }
</script>

<body>
    <ul>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li> 
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        <li>向来缘浅，奈何情深</li>
        
    </ul>
</body>

</html>